- HTML 表單(Form)是網頁中用於收集使用者輸入資訊的一種標準方式。它允許使用者輸入文字、選擇選項、上傳檔案等,然後將這些資訊發送到伺服器以進行處理。以下是 HTML 表單的基本組成部分和一些常用的元素。
- <form> 元素:HTML 表單始於 <form> 元素,它定義了一個表單,通常包圍了表單內的所有元素。<form> 元素有一個必需的屬性 action,用於指定表單資料提交後將資料發送到的伺服器端腳本的,且宣告這個表單的資料會被用 http post 的方法送到 "/process_form.php" 這隻遠端程式。。
<form action="process_form.php" method="post">
<!-- 表單元素將在這裡添加 -->
</form>
- form表單裡可以使用多種元素,這邊用input來做示範。
<input type="text" name="username" placeholder="請輸入使用者名稱">
<input type="password" name="password" placeholder="請輸入密碼">
<input type="radio" name="gender" value="male"> 男性
<input type="radio" name="gender" value="female"> 女性
<input type="checkbox" name="subscribe" value="yes"> 訂閱
- <textarea> 元素:<textarea> 元素用於創建多行文字輸入框,通常用於使用者輸入長文本或評論。
<textarea name="comments" rows="4" cols="50"></textarea>
- <select> 元素:<select> 元素用於創建下拉選單,供使用者從多個選項中選擇一個或多個。
<select name="country">
<option value="usa">美國</option>
<option value="canada">加拿大</option>
<option value="uk">英國</option>
</select>
- 最後加上submit,以把資料送出,以下是全部的程式碼。
<body>
<form action="process_form.php" method="post">
<input type="text" name="username" placeholder="請輸入使用者名稱">
<input type="password" name="password" placeholder="請輸入密碼">
<input type="radio" name="gender" value="male"> 男性
<input type="radio" name="gender" value="female"> 女性
<input type="checkbox" name="subscribe" value="yes"> 訂閱
<select name="country">
<option value="usa">美國</option>
<option value="canada">加拿大</option>
<option value="uk">英國</option>
</select>
<p><input type="submit" value="送出資料"></p>
</form>
</body>